<template>
	<div>
		<div class="dialog-mask" @click.self="$emit('close')">
			<div class="dialog-content">
				<div class="header">
					<slot name="a"></slot>
				</div>
				<div class="content">
					<slot name="b"></slot>
				</div>
				<div class="footer">
					<slot name="c"></slot>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
	        name:'MiDoalog',
	        data(){
	                return{

	                }
	        }

	}

</script>

<style scoped>
	.dialog-mask{
		position: fixed;left:0;top:0;
		width: 100vw;height:100vh;
		background-color: rgba(0,0,0,0.4);
	}
	.dialog-content{
		border-radius: 8px;
		width: 315px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}
</style>
